<template>
  <view class="audio-in">
    <view class="inner-height"></view>
    <zaudio theme="theme1" v-if="isInit"></zaudio>
  </view>
</template>

<script>
import zaudio from '@/components/uniapp-zaudio/zaudio'
import ZAudio from '@/components/uniapp-zaudio'
import Vue from 'vue'
import { articleGet } from '@/api/yuedu'
export default {
  components: { zaudio: zaudio },
  data() {
    return {
      isInit: false
    }
  },
  onLoad({ id }) {
    let zaudio = new ZAudio({
      continuePlay: false, //续播
      autoPlay: true //自动播放 部分浏览器不支持
    })
    Vue.prototype.$zaudio = zaudio //挂载vue原型链上
    this.isInit = true
    setTimeout(() => {
      this.getData(64)
    }, 1000)
  },
  methods: {
    getData(id) {
      articleGet(id).then((res) => {
        if (res.code === 200) {
          var data = [
            {
              src: res.data.articleAttaUrl,
              title: res.data.articleTitle,
              singer: res.data.userName,
              coverImgUrl: res.data.avatarUrl
            }
          ]
          this.$zaudio.setAudio(data) //添加音频
          this.$zaudio.setRender(0) //渲染第一首音频
          this.$zaudio.operate()
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.audio-in {
  height: 100vh;
  background-color: #fff;
  .inner-height {
    height: 200rpx;
  }
}
</style>
